import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

import styles from "./results.module.css";

import { useNavigate } from "react-router-dom";

import {
  Button,
  DatePicker,
  Descriptions,
  Input,
  Table,
  Space,
  Pagination,
} from "antd";

import axios from "../../../http/index";

// 时间范围选择器
const { RangePicker } = DatePicker;

const Index = () => {
  const { id } = useParams();

  const navigate = useNavigate();

  const [salesman, setSalesman] = useState("");
  const [summary, setSummary] = useState({});
  const [dataList, setDataList] = useState([]);
  const [searchCustom, setSearchCustom] = useState("");
  const [total, setTotal] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);

  // 获取数据
  useEffect(() => {
    axios({
      url: "/auth/results",
      method: "GET",
      params: {
        id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data.code === "200") {
          setSalesman(res.data.data.name);
          setSummary(res.data.data.summary);
          setDataList(res.data.data.dataList);
          setTotal(res.data.total);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, [id]);

  // 处理数据
  const formateList = dataList.map((item) => {
    if (item.customState === 0) {
      item.customState = "正在跟进";
    } else if (item.customState === 1) {
      item.customState = "未跟进";
    }
    if (item.customStar === 1) {
      item.customStar = "一星级";
    } else if (item.customStar === 2) {
      item.customStar = "二星级";
    } else {
      item.customStar = "三星级";
    }
    item.moneyNumber = Number(
      item.moneyNumber.toString().match(/^\d+(?:\.\d{0,2})?/)
    );
    return item;
  });

  // 数字处理
  // const formateNum = (num) => {
  //   return Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
  // };

  // const money = formateNum(oldMoney);

  // 返回按钮
  const back = () => {
    navigate(-1);
  };

  // 查询按钮
  const search = () => {
    console.log(123);
  };

  // 表格
  const columns = [
    {
      title: "客户名称",
      dataIndex: "customName",
      align: "center",
    },
    {
      title: "客户状态",
      dataIndex: "customState",
      align: "center",
    },
    {
      title: "客户星级",
      dataIndex: "customStar",
      align: "center",
    },
    {
      title: "累计成交商品数",
      dataIndex: "goodsNumber",
      align: "center",
    },
    {
      title: "累计成交金额",
      dataIndex: "moneyNumber",
      align: "center",
    },
    {
      title: "累计成交订单",
      dataIndex: "orderNumber",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "action",
      align: "center",
      render: (_, record) => (
        <Space size="middle">
          <Button>查看 {record.name}</Button>
        </Space>
      ),
    },
  ];

  // 分页
  const pageChange = (page) => {
    setCurrentPage(page);
    axios({
      url: "/auth/results",
      method: "GET",
      params: {
        id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data.code === "200") {
          setSalesman(res.data.data.name);
          setSummary(res.data.data.summary);
          setDataList(res.data.data.dataList);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div className={styles.results}>
      <div className={styles.header}>
        <div className={styles.title}>
          <span>{salesman}-业绩汇总</span>
          <div className={styles.border_row}></div>
        </div>
        <div>
          <Button type="primary" onClick={back}>
            返回
          </Button>
        </div>
      </div>
      <hr className={styles.hr} />
      <div className={styles.content}>
        <div className={styles.content_box}>
          <div className={styles.search_box}>
            <RangePicker
              className={styles.rangeDate}
              placeholder={["开始日期", "结束日期"]}
            />
            <Button type="primary" onClick={search}>
              查询
            </Button>
          </div>
          <div className={styles.content_mid}>
            <Descriptions
              layout="vertical"
              bordered
              column={4}
              size="middle"
              labelStyle={{
                fontWeight: "700",
                color: "#666666",
                textAlign: "center",
                width: "100%",
              }}
              contentStyle={{
                fontWeight: "700",
                color: "#666666",
                fontSize: "18px",
              }}
            >
              <Descriptions.Item label="客户数">
                {summary.customer}
              </Descriptions.Item>
              <Descriptions.Item label="累计推广交易金额">
                ¥{summary.money}
              </Descriptions.Item>
              <Descriptions.Item label="累计推广出货数">
                {summary.goods}
              </Descriptions.Item>
              <Descriptions.Item label="累计推广客户下单数">
                {summary.order}
              </Descriptions.Item>
              <Descriptions.Item label="跟进客户数">
                {summary.follow}
              </Descriptions.Item>
              <Descriptions.Item label="跟进记录">
                {summary.followRecord}
              </Descriptions.Item>
              <Descriptions.Item label="工单记录">
                {summary.orderRecord}
              </Descriptions.Item>
              <Descriptions.Item label=""></Descriptions.Item>
            </Descriptions>
          </div>
        </div>
        <div className={styles.content_box}>
          <div className={styles.search_box_top}>
            <div className={styles.search_title}>
              <div className={styles.col}></div>
              <span className={styles.tip}>数据列表</span>
              <Input
                className={styles.input}
                placeholder="客户名称"
                value={searchCustom}
                onChange={(e) => {
                  setSearchCustom(e.target.value);
                }}
              />
              <Button type="primary">查询</Button>
            </div>
            <div className={styles.right}>
              <Button type="primary">导出</Button>
            </div>
          </div>
          <div className={styles.content_mid}>
            <div className={styles.table_box}>
              <Table
                columns={columns}
                dataSource={formateList}
                pagination={false}
              />
            </div>

            <div className={styles.page_box}>
              <Pagination
                current={currentPage}
                pageSize={15}
                total={total}
                showSizeChanger={false}
                showTotal={(total) => `合计 ${total} 条`}
                onChange={(page) => {
                  pageChange(page);
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
